<template>
    <el-main>
        <el-form
            :model="userForm"
            :rules="rules"
            ref="userForm"
            size="small"
            label-position="top"
        >
            <el-form-item label="User ID" prop="id">
                <el-input v-model="userForm.id" disabled></el-input>
            </el-form-item>

            <el-form-item label="User Name" prop="username">
                <el-input v-model="userForm.username" disabled></el-input>
            </el-form-item>

            <el-form-item label="User Password" prop="password">
                <el-input v-model="userForm.password" type="password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="Confirm Password" prop="confirmpassword">
                <el-input v-model="userForm.confirmpassword" type="password" autocomplete="off"></el-input>
            </el-form-item>

            <el-form-item label="Role Management" prop="roles">
                <el-transfer
                    v-model="userForm.roleIds"
                    :data="roles"
                    :props="{key:'id', label:'name', disabled:'disabled'}"
                    :titles="[this.$t('model.role.all'), this.$t('model.role.select')]"
                    style="height:180px;min-width: 500px;"
                ></el-transfer>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="submitForm();">{{$t('button.save')}}</el-button>
            </el-form-item>
        </el-form>
    </el-main>
</template>

<script>
import Vue from "vue";

export default {
    name: `information`,
    data: function() {
        return {
            userForm: {
                id: ``,
                username: ``,
                password: ``,
                confirmpassword: ``,
                roleIds: []
            },
            roles: [],
            rules: {
                confirmpassword: [
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.userForm.password) {
                                return callback(
                                    new Error(
                                        this.$t(
                                            `message.delete.passwordnotsame`
                                        )
                                    )
                                );
                            }

                            return callback();
                        },
                        trigger: `blur`
                    }
                ]
            }
        };
    },
    mounted: function() {
        // 获取角色列表
        Vue.axios
            .get(`/api/admin/role/query/listRoles`)
            .then(response => {
                //console.log(JSON.stringify(response));
                this.roles = response.data;
                this.roles.forEach(r => {
                    r.disabled = true;
                });
            })
            .catch(() => {
                this.$router.push("/ui/login");
            });

        // 获取用户基本信息并填充表单
        Vue.axios
            .get(`/api/admin/enduser/query/getMyInfo`)
            .then(response => {
                // console.log(JSON.stringify(response));
                const user = response.data;

                this.userForm.id = user.id;
                this.userForm.username = user.username;
                user.roles.forEach(role => {
                    this.userForm.roleIds.push(role.id);
                });
            })
            .catch(() => {
                this.$router.push("/ui/login");
            });
    },
    methods: {
        // 保存表单方法
        submitForm() {
            this.$refs.userForm.validate(valid => {
                if (valid) {
                    Vue.axios({
                        method: `POST`,
                        url: `/api/admin/enduser/admin/saveUserInfo`,
                        data: this.userForm
                    })
                        .then(response => {
                            // console.log(JSON.stringify(response));
                            if (response.status === 200) {
                                this.$message({
                                    message: this.$t(`message.save.success`),
                                    type: `success`
                                });
                                return;
                            }
                            throw error;
                        })
                        .catch(error => {
                            this.$router.push("/ui/login");
                        });

                    return false;
                }
                return false;
            });
        }
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus"></style>
